<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<style>
    /*公共样式*/
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 100%;
    }
    body{
        display: flex;
        flex-direction: column;
        }
    li{
        list-style: none;
    }
    .left{
        float: left;
    }
    .right{
        float: right;
    }
    header,footer{
        position: fixed;
    }
    /**/
    header{
        width: 100%;
        text-align: center;
        height: 4.6rem;
        line-height: 4.6rem;
        background-color: #f6f6f8;
    }
    .contentBox{
        flex: 1;
        overflow-y: auto;
        padding: 0 0.28rem;
        margin-top: 5.6rem;
        margin-bottom: 3rem;
    }
    .select_all{
        margin-bottom: 1rem;
        overflow: hidden;
    }
    .goods{
        overflow: hidden;
        border-top: 1px solid #f6f6f8;
        padding: 1rem 0;
    }
    .goods .goods_left,.goods .goods_img{
        float: left;
    }
    .goods .goods_img img{
        width: 100%;
        height: 100%;
    }
    .goods_left{
        padding: 2.8rem 1rem;
    }
    .goods .goods_img{
        width: 7rem;
        height: 7rem;
    }
    .goods .goods_right{
        width: 10rem;
        float: right;
    }
    .goods .goods_left .choice{
        border: 0.1rem solid #000;
        border-radius: 50%;
    }
    footer{
        width: 100%;
        height: 3rem;
        bottom: 0;
        background-color: #f6f6f8;
    }
    footer span,footer button{
       display: inline-block;
       height: 3rem;
       line-height: 3rem;
    }
    footer .footer_settlement{
        width: 8.6rem;
        background-color: #775940;
        border: none;
        color: #fff;
    }
</style>
<body>
        <div id="app">
            <!-- 头部 -->
            <header>
                    <h1>购物车</h1>
            </header>
            <!-- 商品展示 -->
            <div class="contentBox">
                <div class="select_all">
                    <input type="checkbox" class="choice" v-model='statusAll' @change='chooseAll'>
                    <span>全选</span>
                </div>
                    <ul>
                            <li v-for="(item,index) in goods" :key="index" class="goods">
                                <div class="goods_left ">
                                    <input type="checkbox" class="choice" v-model='item.status'  @change="chooseHandle">
                                </div>
                                <div class="goods_img">
                                    <img :src="item.img" alt="" srcset="">
                                </div>
                                <div class="goods_right">
                                    <p>{{item.name}}</p>
                                    <p>￥{{item.price}}</p>
                                    <p><button @click="delHandle(index)">移除</button></p>
                                    <!-- <p>总价：{{item.total}}</p> -->
                                    <p>
                                        <button @click='changeNum("-",item)'>-</button>
                                        {{item.amount}}
                                        <button @click='changeNum("+",item)'>+</button>
                                        <!-- <button @click="dropAmount(index)">-</button>
                                        <span>{{item.amount}}</span>
                                        <button @click="addAmount(index)">+</button> -->
                                    </p>
                                </div>
                            </li>
                    </ul>
            </div>
            <!-- 底部 -->
            <footer>
                        <button class="left" @click="delAll">全部删除（{{amount}}）</button>
                        <span class="footer_total left">合计：</span><span>{{priceAll}}元</span>
                    
                        <button class="footer_settlement right">结算{{amount}}</button>
                        
            </footer>
        </div>
</body>
<script>
    /*
    
    */
        var vue = new Vue({  
            el:'#app',
            data:{
                total:0,
                statusAll:false,
                indexList:[],
                goods:[
                    {
                        id:1,
                        name:"床",
                        price:1288.00,//价格
                        img:"./img/Bed.jpg",
                        amount:1,//量
                        total:1288.00,//总价
                        status:false
                    },
                    {
                        id:2,
                        name:"床头柜",
                        price:182.00,
                        img:"./img/bedsideTable.jpg",
                        amount:1,
                        total:182.00,
                        status:false
                    },
                    {
                        id:3,
                        name:"衣柜",
                        price:858.00,
                        img:"./img/armoire.jpg",
                        amount:1,
                        total:858.00,
                        status:false
                    }
                ]
            },
            computed:{
                //所选商品总价
                priceAll() {
                    var totalprice = 0;
                    this.goods.forEach((item) => {
                        if (item.status === true) {
                            totalprice += item.total
                        }
                    })
                    return totalprice
                },
                //所选商品总数
                amount(){
                    let list = this.goods.filter((item,index) =>{
                        return item.status === true
                    })
                    return list.length
                }
            },
            methods:{

                //单选
                chooseHandle() {
                    this.statusAll = this.goods.every(item => {
                        return item.status === true
                    })
                },
                
                //全选
                chooseAll() {
                    console.log(this.statusAll)
                    this.goods.forEach((item) => {
                        item.status = this.statusAll
                    })
                },

                //改变值
                changeNum(type,item){
                    if(type === "+"){
                        item.amount++
                    }else{
                        item.amount--
                    }if(item.amount<=1){
                        item.amount=1
                        
                    }
                    item.total = item.amount * item.price
                    this.chooseHandle()
                },

                //删除单个
                delHandle(index){
                    this.goods.splice(index,1)
                },
                //删除所选
                delAll(){
                    this.goods = this.goods.filter((item) => {
                        return item.status !== true
                    });
                }
            },
        })
</script>
</html>